<template>
  <div id="cart">
    <Navbar class="nav-bar">
      <h2 slot="center">购物车({{ cartLength }})</h2>
    </Navbar>
    <Scroll class="wrapper" ref="scroll" :pullUpLoad="true">
      <CartList></CartList>
    </Scroll>
    <CartBottomBar></CartBottomBar>
  </div>
</template>

<script>
import CartList from "./childComps/CartList";
import CartBottomBar from "./childComps/CartBottomBar";

export default {
  components: {
    CartList,
    CartBottomBar,
  },
  computed: {
    cartLength() {
      return this.$store.state.cartList
        .filter((item) => {
          return item.checked;
        })
        .reduce((preValue, item) => {
          return (preValue += item.count);
        }, 0);
    },
  },
  activated() {
    this.$refs.scroll.scroll.refresh();
  },
};
</script>

<style lang="less" scoped>
#cart {
  height: 100vh;
  background-color: #f1f3f4;
  .nav-bar {
    position: relative;
    z-index: 9;
    background-color: #ff8198;
    color: #fff;
  }
  .wrapper {
    height: calc(100% - 133px);
  }
}
</style>